<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementUI/element-plus_dist.css">
</head>
<body>
    <div id="app">
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" style="width: 80%; margin-top: 100px; margin-left: 20%">
                    <el-table-column fixed prop="no" label="学号" width="150"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                    <el-table-column prop="idno" label="身份证号" width="300"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="120"></el-table-column>
                    <el-table-column prop="sex" label="性别" width="100"></el-table-column>
                    <el-table-column prop="age" label="年龄" width="100"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleClick">
                                <el-icon :size="20">
                                    <More />
                                </el-icon>
                            </el-button>

                            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">
                                <el-icon :size="20">
                                    <Edit />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-dialog v-model="dialogFormVisible" title="学生编辑">
                <el-form :model="form">
                    <el-form-item label="学号" :label-width="formLabelWidth">
                        <el-input v-model="form.no" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="身份证号" :label-width="formLabelWidth">
                        <el-input v-model="form.idno" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="手机号码" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                      提交
                    </el-button>
                  </span>
                </template>
            </el-dialog>
        </el-row>
        <el-row>
            <el-col :span="12"></el-col>
            <el-col :span="12">
                <el-pagination
                        :page-size="5"
                        :pager-count="11"
                        layout="prev, pager, next"
                        :total="total"
                        @prev-click="preClick"
                        @next-click="nextClick"
                        @current-change="currentChange"
                />
            </el-col>
        </el-row>
    </div>
    <script src="../plugins/axios.min.js"></script>
    <script src="../plugins/vue.global.js"></script>
    <script src="../plugins/elementUI/element-plus.js"></script>
    <script src="../plugins/elementUI/icon.min.js"></script>
    <script>
        const {createApp, ref} = Vue
        const app = createApp({
            setup(){
                //对话框是否可见
                const dialogFormVisible = ref(false)
                const formLabelWidth = '140px'
                const form = ref({
                    no: '',
                    name: '',
                    idno: '',
                    phone: ''
                })
                //操作的函数
                const handleClick = () => {
                    console.log('click')
                }
                const handleEdit = (data) => {
                    console.log('-----------------data:')
                    console.log(data)
                    dialogFormVisible.value = true
                    console.log("--------------赋值前：")
                    console.log(form.value)
                    console.log("--------------赋值之后：")
                    form.value = data
                    console.log(form.value)

                }
                const handleSubmit = () => {
                    axios.post("/student/edit", form.value)
                        .then((res) => {
                            tableData.value = res.data.data.records
                            total.value = res.data.data.total
                            console.log(total.value)
                        })
                        .catch((res)=>{

                        }).finally((res)=>{

                    })
                    dialogFormVisible.value = false
                }
                //数据
                let tableData = ref([])
                //总的条数
                let total = ref(0)
                //第一次查询数据
                getData(1)
                //上一页
                function preClick(currentPage){
                    getData(currentPage)
                }
                //下一页
                function nextClick(currentPage){
                    getData(currentPage)
                }
                //根据页码显示数据
                function currentChange(currentPage){
                    getData(currentPage)
                }
                function getData(currentPage){
                    axios.post("/student/page", {
                        size: 5,
                        current: currentPage
                    })
                    .then((res) => {
                        tableData.value = res.data.data.records
                        total.value = res.data.data.total
                        console.log(total.value)
                    })
                    .catch((res)=>{

                    }).finally((res)=>{

                    })
                }

                return {
                    handleClick,
                    tableData,
                    preClick,
                    nextClick,
                    total,
                    currentChange,
                    dialogFormVisible,
                    formLabelWidth,
                    form,
                    handleEdit,
                    handleSubmit
                }
            }
        });
        app.use(ElementPlus);
        //讲element-plus的icons引入进来
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
        app.mount("#app");
    </script>
</body>
</html>